<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width、 initial-scale=1.0">
    <title>Document</title>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self';">
    <link rel="stylesheet" href="tag.css">
</head>

<body>
    <ol>
        <li>
            <h4>📌基础文本内容标签</h4>
        </li>
        <table border="1">
            <!-- 头 -->
            <thead>
                <tr>
                    <th>📌标签</th>
                    <!-- <th> <img src="../../build/2.png" width="60" height="100" alt="表格的示例图片"></th> -->
                    <th>📌作用</th>
                    <th>📌语义</th>
                    <th>📌示例</th>
                </tr>
            </thead>
            <!-- 中间 -->
            <tbody>
                <tr>
                    <td><code>&lt;h&gt;</h1></code></td>
                    <td>标题</td>
                    <td>
                        <h1>h1 作为主标题</h1>
                        <u>搜索引擎（SEO）会优先抓取 h1 的内容</u>
                        <h6>h2~h6 作为子标题 </h6>
                    </td>
                    <td><a href="tag_text/text.html" target="_blank">基础文本标签>></a></td>
                </tr>
                <tr>
                    <td><code>&lt;p&gt;</code></td>
                    <td>段落</td>
                    <td>
                        <p>这是一个段落。</p>
                    </td>
                    <td><a href="tag_text/text.html" target="_blank">基础文本标签>></a></td>
                </tr>
                <tr>
                    <td><code>&lt;span&gt;</code></td>
                    <td>行内文本容器</td>
                    <td><span>用于包裹小范围文本，无语义，常用于样式修改</span></td>
                    <td><a href="tag_text/text.html" target="_blank">基础文本标签>></a></td>
                </tr>
                <tr>
                    <td><code>&lt;div&gt;</code></td>
                    <td>块级容器</td>
                    <td>
                        <div>这个一般用于布局，而不是直接显示文本</div>
                    </td>
                    <td><a href="tag_text/text.html" target="_blank">基础文本标签>></a></td>
                </tr>
                <tr>
                    <td><code>&lt;label&gt;</code></td>
                    <td>为表单控件提供标签，点击标签时聚焦对应的表单元素。</td>
                    <td><label for="input1">用户名：</label><input type="text" id="input1"></td>
                    <td><a href="tag_text/text.html" target="_blank">基础文本标签>></a></td>
                </tr>
            </tbody>
            <!-- 尾巴 -->
            <tfoot>
                <tr>
                    <td>结尾</td>
                    <td><a href="tag_text/text.html" target="_blank">基础文本标签样本>></a></td>
                </tr>
            </tfoot>
        </table>
        <!--  -->
        <li>
            <h4>📌文本格式化标签</h4>
        </li>
        <table border="1">
            <!-- 头 -->
            <thead>
                <tr>
                    <th>📌标签</th>
                    <th>📌作用</th>
                    <th>📌示例</th>
                </tr>
            </thead>
            <!-- 中间 -->
            <tbody>
                <tr>
                    <td><code>&lt;strong&gt;</h1></code></td>
                    <td>加粗</td>
                    <td>
                        <strong>这是一段文本</strong>
                    </td>
                </tr>
                <tr>
                    <td><code>&lt;b&gt;</code></td>
                    <td>加粗</td>
                    <td>
                        <b>这是一段文本</b>
                    </td>
                </tr>
                <tr>
                    <td><code>&lt;em&gt;</code></td>
                    <td>斜体</td>
                    <td><em>这是一段文本</em></td>
                </tr>
                <tr>
                    <td><code>&lt;i&gt;</code></td>
                    <td>斜体</td>
                    <td>
                        <i>这是一段文本</i>
                    </td>
                </tr>
                <tr>
                    <td><code>&lt;u&gt;</code></td>
                    <td>下划线</td>
                    <td><u>这是一段文本</u></td>
                </tr>
                <tr>
                    <td><code>&lt;ins&gt;</code></td>
                    <td>下划线</td>
                    <td><ins>这是一段文本</ins></td>
                </tr>
                <tr>
                    <td><code>&lt;s&gt;</code></td>
                    <td>删除线</td>
                    <td><s>这是一段文本</s></td>
                </tr>
                <tr>
                    <td><code>&lt;del&gt;</code></td>
                    <td>删除线</td>
                    <td><del>这是一段文本</del></td>
                </tr>
            </tbody>
            <!-- 尾巴 -->
            <tfoot>
                <tr>
                    <td>结尾</td>
                    <td><a href="tag_text/text.html" target="_blank">基础文本标签样本>></a></td>
                </tr>
            </tfoot>
        </table>
        <!--  -->
        <li>
            <h4>📌代码和预格式化文本</h4>
        </li>
        <table border="1">
            <!-- 头 -->
            <thead>
                <tr>
                    <th>📌标签</th>
                    <th>📌作用</th>
                    <th>📌示例</th>
                    <th>📌语义</th>
                </tr>
            </thead>
            <!-- 中间 -->
            <tbody>
                <tr>
                    <td><code>&lt;code&gt;</h1></code></td>
                    <td>代码文本</td>
                    <td>
                        <code>这是一段文本</code>
                    </td>
                    <td>显示内联代码，默认等宽字体</td>
                </tr>
                <tr>
                    <td><code>&lt;pre&gt;</code></td>
                    <td>预格式化文本</td>
                    <td>
                        <pre>这是一段文本</pre>
                    </td>
                    <td>保留空格和换行，用于显示代码或格式化文本</td>
                </tr>
                <tr>
                    <td><code>&lt;kdb&gt;</code></td>
                    <td>按键</td>
                    <td><kbd>这是一段文本</kbd></td>
                    <td>表示键盘输入（比如<code>Ctrl + C</code>）</td>
                </tr>
                <tr>
                    <td><code>&lt;samp&gt;</code></td>
                    <td>输出</td>
                    <td>
                        <samp>这是一段文本</samp>
                    </td>
                    <td>
                        表示计算机输出的内容
                    </td>
                </tr>
                <tr>
                    <td><code>&lt;var&gt;</code></td>
                    <td>变量</td>
                    <td><var>这是一段文本</var></td>
                    <td>表示编程变量</td>
                </tr>
            </tbody>
            <!-- 尾巴 -->
            <tfoot>
                <tr>
                    <td>结尾</td>
                    <td><a href="tag_text/text.html" target="_blank">基础文本标签样本>></a></td>
                </tr>
            </tfoot>
        </table>
        <li>📌引用和语义化文本</li>
        <table border="1">
            <!-- 头 -->
            <thead>
                <tr>
                    <th>📌标签</th>
                    <th>📌作用</th>
                    <th>📌示例</th>
                    <th>📌语义</th>
                </tr>
            </thead>
            <!-- 中间 -->
            <tbody>
                <tr>
                    <td><code>&lt;blockquote&gt;</h1></code></td>
                    <td>块级引用</td>
                    <td>
                        <blockquote>这是一段文本</blockquote>
                    </td>
                    <td>引用一段内容（通常用于文章引用）</td>
                </tr>
                <tr>
                    <td><code>&lt;q&gt;</code></td>
                    <td>行内引用</td>
                    <td>
                        <q>这是一段文本</q>
                    </td>
                    <td>短引用，通常会加上<code> "" </code>引号</td>
                </tr>
                <tr>
                    <td><code>&lt;cite&gt;</code></td>
                    <td>引用来源</td>
                    <td><cite>这是一段文本</cite></td>
                    <td>表示引用的来源，通常用于书籍、文章、电影等</td>
                </tr>
                <tr>
                    <td><code>&lt;abbr&gt;</code></td>
                    <td>缩写</td>
                    <td>
                        <abbr>这是一段文本</abbr>
                    </td>
                    <td>表示缩写，可以添加 <code>title</code> 说明</td>
                </tr>
            </tbody>
            <!-- 尾巴 -->
            <tfoot>
                <tr>
                    <td>结尾</td>
                    <td><a href="tag_text/text.html" target="_blank">基础文本标签样本>></a></td>
                </tr>
            </tfoot>
        </table>
        <li>📌列表标签</li>
        <table border="1">
            <!-- 头 -->
            <thead>
                <tr>
                    <th>📌标签</th>
                    <th>📌作用</th>
                    <th>📌示例</th>
                    <th>📌语义</th>
                </tr>
            </thead>
            <!-- 中间 -->
            <tbody>
                <tr>
                    <td><code>&lt;ul&gt;</h1></code></td>
                    <td>无序列表</td>
                    <td>
                        <ul>这是一段文本</ul>
                    </td>
                    <td>适用于项目列表（带圆点 <code>•</code>）</td>
                </tr>
                <tr>
                    <td><code>&lt;ol&gt;</code></td>
                    <td>有序列表</td>
                    <td>
                        <ol>这是一段文本</ol>
                    </td>
                    <td>适用于步骤列表（带数字 <code>1. 2. 3.</code>）</td>
                </tr>
                <tr>
                    <td><code>&lt;li&gt;</code></td>
                    <td>列表项</td>
                    <td>
                        <li>这是一段文本</li>
                    </td>
                    <td>列表的子项</td>
                </tr>
            </tbody>
            <!-- 尾巴 -->
            <tfoot>
                <tr>
                    <td>结尾</td>
                    <td><a href="tag_text/text.html" target="_blank">基础文本标签样本>></a></td>
                </tr>
            </tfoot>
        </table>
        <li>📌 其他特殊文本标签</li>
        <table border="1">
            <!-- 头 -->
            <thead>
                <tr>
                    <th>📌标签</th>
                    <th>📌作用</th>
                    <th>📌示例</th>
                    <th>📌语义</th>
                </tr>
            </thead>
            <!-- 中间 -->
            <tbody>
                <tr>
                    <td><code>&lt;mark&gt;</h1></code></td>
                    <td>高亮文本</td>
                    <td>
                        <mark>这是一段文本</mark>
                    </td>
                    <td>给文本加背景色（通常是黄色）</td>
                </tr>
                <tr>
                    <td><code>&lt;sup&gt;</code></td>
                    <td>上标</td>
                    <td>
                        <sup>这是一段文本</sup>
                    </td>
                    <td>适用于数学公式、单位指数</td>
                </tr>
                <tr>
                    <td><code>&lt;sub&gt;</code></td>
                    <td>下标</td>
                    <td><sub>这是一段文本</sub></td>
                    <td>适用于化学公式等</td>
                </tr>
            </tbody>
            <!-- 尾巴 -->
            <tfoot>
                <tr>
                    <td>结尾</td>
                    <td><a href="tag_text/text.html" target="_blank">基础文本标签样本>></a></td>
                </tr>
            </tfoot>
        </table>
        <li>🔥 总结 </li>
        <table border="1">
            <!-- 头 -->
            <thead>
                <tr>
                    <th>📌类型</th>
                    <th>📌主要标签</th>
                    <th>📌作用</th>
                </tr>
            </thead>
            <!-- 中间 -->
            <tbody>
                <tr>
                    <td>基础文本</td>
                    <td>
                        <code>&lt;p&gt;</code>、<code>&lt;span&gt;</code>、<code>&lt;div&gt;</code>
                    </td>
                    <td>普通文本显示</td>
                </tr>
                <tr>
                    <td>标题</td>
                    <td>
                        <code>&lt;h1&gt;</code>~<code>&lt;h6&gt;</code>
                    </td>
                    <td>SEO 友好的标题</td>
                </tr>
                <tr>
                    <td>格式化</td>
                    <td><code>&lt;strong&gt;</code>、<code>&lt;b&gt;</code>、<code>&lt;em&gt;</code>、<code>&lt;i&gt;</code>、<code>&lt;u&gt;</code>、<code>&lt;s&gt;</code>
                    </td>
                    <td>加粗、斜体、下划线、删除线</td>
                </tr>
                <tr>
                    <td>代码</td>
                    <td><code>&lt;code&gt;</code>、<code>&lt;pre&gt;</code>、<code>&lt;kbd&gt;</code>、<code>&lt;samp&gt;</code>、<code>&lt;var&gt;</code>
                    </td>
                    <td>代码、键盘输入</td>
                </tr>
                <tr>
                    <td>引用</td>
                    <td><code>&lt;blockquote&gt;</code>、<code>&lt;q&gt;</code>、<code>&lt;cite&gt;</code>、<code>&lt;abbr&gt;</code>
                    </td>
                    <td>引用，缩写</td>
                </tr>
                <tr>
                    <td>列表</td>
                    <td><code>&lt;ul&gt;</code>、<code>&lt;ol&gt;</code>、<code>&lt;li&gt;</code></td>
                    <td>列表（有序/无序）</td>
                </tr>
                <tr>
                    <td>特殊文本</td>
                    <td><code>&lt;mark&gt;</code>、<code>&lt;sup&gt;</code>、<code>&lt;sub&gt;</code></td>
                    <td>高亮、上下标</td>
                </tr>
            </tbody>
            <!-- 尾巴 -->
            <tfoot>
                <tr>
                    <td>结尾</td>
                    <td><a href="tag_text/text.html" target="_blank">基础文本标签样本>></a></td>
                </tr>
            </tfoot>
        </table>
    </ol>

</body>
<script src="tag.js"></script>

</html>